<template>





  <view class="register">
		<view class="back-button" @click="goBack">
					<image  class="back-button-image" src= "/static/return.png" />
			</view>



    <view class="content">
      <view class="header">
        <image :src="logoImage" />
      </view>
      <view class="main">
        <wInput
          v-model="form.phone"
          type="text"
          maxlength="30"
          placeholder="请输入手机号"
        ></wInput>
        <wInput
          v-model="form.password"
          type="password"
          placeholder="请输入密码"
          isShowPass
        ></wInput>
        <wInput
          v-model="form.verCode"
          type="text"
          maxlength="6"
          placeholder="请输入验证码"
          ref="runCode"
          :isShowCode="true"
          @setCode="getVerCode"
        ></wInput>
      </view>

      <wButton
        class="wbutton"
        text="注 册"
        :rotate="isRotate"
        @click="startReg"
      ></wButton>
    </view>
  </view>

</template>

<script>
import { mapActions } from 'vuex'
import wInput from '../../components/watch-login/watch-input.vue'
import wButton from '../../components/watch-login/watch-button.vue'
import localStore from '@/helpers/localStore.js'
export default {
  components: {
    wInput,
    wButton
  },

  data() {
    return {

      logoImage: '/static/logo.png',
      form: {
        phone: '11111',
        password: '123456',
        verCode: ''
      },

      isRotate: false ,//是否加载旋转
    }
  },

  computed: {
    validate() {
      if (this.form.password.length < 6) {
        this.$u.toast('密码至少为6位')
        return false
      }
      return true
    }
  },

  methods: {

    ...mapActions('user', ['sendRegisterEmail', 'register']),

		goBack(){
				history.back()
		},

    async getVerCode() {
      await this.sendRegisterEmail(this.form.phone)
			const verificationCode = localStore.get("verificationCode") //后端传来的验证码
      this.$u.toast(verificationCode)
			this.$refs.runCode.$emit('runCode')
    },

    async startReg() {
      if (this.isRotate || !this.validate) return
      this.isRotate = true
			const verificationCode = localStore.get("verificationCode") //后端传来的验证码

			if (this.form.verCode != verificationCode){
				this.$u.toast("验证码不同，请重新获取")
			} else{
				try {
				  await this.register({
				    phone: this.form.phone,
				    password: this.form.password,
				  })
				  this.isRotate = false
				  this.$u.toast('注册成功')
				  setTimeout(() => {
				    uni.navigateTo({
				      // url: '/pages/login/register_personinfo?form='+JSON.stringify(this.form)
							url: '/pages/login/register_personinfo?phone='+JSON.stringify(this.form.phone)+'&password='+JSON.stringify(this.form.password)
				    })
				  }, 1000)
				} catch {
				  this.isRotate = false
				}
			}
    }
  }
}
</script>

<style>
@import url('../../components/watch-login/css/icon.css');
@import url('./css/main.css');
.back-button {
  position: relative;
  left: 10px;
  top: 10px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  /* 添加其他样式，如背景颜色、边框等 */
}
.back-button-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 添加其他样式，如边框、阴影等 */
}

</style>
